<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>英文单词背诵表</title>
  <link rel="stylesheet" href="./lib/layui/css/layui.css">
  <link rel="stylesheet" href="./lib/swiper/swiper.min.css">
  <link rel="stylesheet" href="./css/base.css">
  <style>
    body {
      margin: 10px;
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    }

    .layui-tab-item {
      padding: 10px;
    }

    #fileInput {
      display: none;
    }
  </style>
</head>

<body>
  <input type="file" id="fileInput" accept="text/plain">
  <button id="btnChooseFile" type="button" class="layui-btn layui-btn-danger layui-btn-sm">选择题目数据文件</button>

  <!-- 选项卡 -->
  <div class="layui-tab layui-tab-card" lay-allowClose="true">
    <ul class="layui-tab-title">
    </ul>
    <div class="layui-tab-content">
    </div>
  </div>

  <!-- 电梯导航 -->
  <div class="lift-nav">
    <ul class="lift">
      <!-- <li>1楼</li>
      <li>2楼</li>
      <li>3楼</li>
      <li>4楼</li>
      <li>5楼</li>
      <li>6楼</li> -->
    </ul>
  </div>

  <script>
    window.addEventListener('load', function () {

      // 获取元素
      let fileChoose = document.querySelector('#fileInput')
      let tabTitle = document.querySelector('.layui-tab-title')
      let tabContent = document.querySelector('.layui-tab-content')
      let ulQues = document.querySelector('#ulQuestion')
      let ulQues1 = document.querySelector('#ulQuestionSingle')
      let ulQues2 = document.querySelector('#ulQuestionMul')
      let ulQues3 = document.querySelector('#ulQuestionSingleCode')
      let $lifeDiv = $('div.lift-nav > ul.lift') // 电梯导航

      // 一：选择题目文件 加载数据，并生成列表 --------------------------------
      btnChooseFile.addEventListener('click', function () {
        fileChoose.click()
      })
      fileChoose.addEventListener('change', selectFile);

      // 二：加载时 从本地 读取数据，并显示 -----------------
      // 数据操作对象
      let dataHelper = new DataHelper('engwordBank')
      // 从本地 获取 数据
      let bank = dataHelper.getData();
      // 初始化
      initData()
      function initData() {
        if (bank) {
          // 如果存在，则创建新的 问题仓库，并将 本地问题数据 传入
          bank = new EngwordBank(bank)
          console.log(bank)
          // 生成阶段 tab
          makeTabList(bank.stages)
        }
      }

      // 1.选择文件 -------------------------------------
      function selectFile() {
        if (this.files.length === 0) {
          console.log('请选择文件！');
          return;
        }
        // 创建文件读取器
        const reader = new FileReader();
        // 设置读取成功后的 回调函数
        reader.onload = function fileReadCompleted() {
          // 1.创建题库对象 
          bank = new EngwordBank()
          // 2.初始化题库数据
          let str = reader.result.replace(/“/g, '"').replace(/”/g, '"')
          bank.initData(str)
          // 3. 保存到本地
          dataHelper.saveData(bank)
          // 4.生成阶段 tab
          makeTabList(bank.stages)
        };
        // 开始读取文件
        reader.readAsText(this.files[0]);
      }

      // 二：生成阶段 Tab列表 ----------------------------
      function makeTabList(stages) {
        if (!stages) return
        // console.log(questions)
        let arrTitle = []
        let arrContent = []
        // 遍历 阶段数组
        for (let stage of stages) {
          if (stage.daylist.length === 0) break
          // 添加 阶段 li
          arrTitle.push(`<li stageid="${stage.id}">${stage.name}阶段</li>`)
          // 添加 阶段 div 内容
          arrContent.push(makeDayList(stage))
        }
        tabTitle.innerHTML = arrTitle.join('')
        tabContent.innerHTML = arrContent.join('')

        tabTitle.children[0] && tabTitle.children[0].click()
      }

      // 三：生成阶段 单词列表-----------------------------
      function makeDayList(stage) {
        const conHtml = template('tpl-day', stage)
        return conHtml
      }

      // 四：生成电梯导航 ----------------------------------
      let liftArr = []
      // makeNav()
      function makeNav() {
        LiftEffect({
          "control1": ".lift-nav",//侧栏电梯的容器
          "control2": ".lift",//需要遍历的电梯的父元素
          "target": [".t1", ".t2", ".t3", ".t4", ".t5", ".t6"],//监听的内容，注意一定要从小到大输入
          "current": "current"//选中项 类名
        });
      }

      // 五：阶段tab 点击事件 ------------------------------
      $('.layui-tab-title').on('click', 'li', function () {
        // console.log(this)
        let ind = $(this).index()
        let strStageId = this.getAttribute('stageid')
        // 根据 当前 阶段 的 天标题 生成 电梯导航li 和 target 类名
        let $conDiv = $('.layui-tab-item.stage')[ind]
        let arrLi = []
        let arrClassName = []
        let dayName = ''
        $('h3.dayTitle', $conDiv).each((ind, ele) => {
          dayName = ele.getAttribute('dayname')
          dayName = dayName.slice(0, dayName.indexOf('_'))
          arrLi.push(`<li stageid="${strStageId}">${dayName}</li>`)
          arrClassName.push('h3.t' + (ind + 1) + '_' + strStageId)
        })
        $lifeDiv.html(arrLi.join(''))

        // console.log(arrClassName)

        // 生成 电梯
        LiftEffect({
          control1: ".lift-nav",//侧栏电梯的容器
          control2: ".lift",//需要遍历的电梯的父元素
          stageId: strStageId,// 阶段id
          target: arrClassName,//[".t1_1", ".t2_1"],//监听的内容，注意一定要从小到大输入
          current: "current"//选中项 类名
        });
      }).children(':first').click()

      // 4. 点击回到顶部
      // $(".fixedtool .back").on("click", function () {
      //   $("html,body").stop().animate({
      //     scrollTop: 0
      //   })
      // })
    })
  </script>

  <!-- 阶段选项卡内容 模板 -->
  <script type="text/html" id="tpl-day">
    <div class="layui-tab-item stage" stageid="{{id}}">
      {{if daylist.length>0}}
          {{each daylist}}
          <h3 class="dayTitle t{{$index+1}}_{{id}}" dayname="{{$value.name}}">{{$value.name}}</h3>
          <table>
            <tr>
              <th>名称</th>
              <th>音标</th>
              <th>单双标签</th>
              <th>含义</th>
              <th>备注</th>
            </tr>
            {{each $value.words}}
            <tr>
              <td>{{$value[0]}}</td>
              <td>{{$value[1]}}</td>
              <td>{{$value[2]}}</td>
              <td>{{$value[3]}}</td>
              <td>{{$value[4]}}</td>
            </tr>
            {{/each}}
          </table>
          {{/each}}
      {{else}}
          <h2>{{name}}阶段 暂无数据</h2>
      {{/if}}
    </div>
  </script>



  <!-- 导入新版(v2.6.7)的layui JS文件 -->
  <script src="./lib/layui/layui.js"></script>
  <script src="./lib/jquery.min.js"></script>
  <script src="./lib/LiftEffect.js"></script>
  <!-- 加载 模板引擎js -->
  <script src="./lib/template-web.js"></script>
  <script src="./js/DataHelper.js"></script>
  <script src="./js/EngwordBank.js"></script>
</body>

</html>